<template>
	<view class="page">
		<!-- #ifdef H5 -->
		<topVue title="声音管理" :isBack="true" rightIcon="server-fill"></topVue>
		<!-- #endif -->
		<view class="main-content">
			<scroll-view class="content" scroll-y>

				<!-- 声音训练额度 -->
				<view class="h2">声音训练额度</view>
				<view class="flex-between margin20">
					<view class="li flex-column flex-between align-center padding-column25">
						<text style="font-weight: 600; font-size: 34rpx; color: #000;">{{ availableQuota }}次</text>
						<text style="color: #7B838D;">可用额度</text>
					</view>
					<view class="li flex-column flex-between align-center padding-column25">
						<text style="font-weight: 600; font-size: 34rpx; color: #000;">{{ usedQuota }}次</text>
						<text style="color: #7B838D;">已使用额度</text>
					</view>
				</view>

				<!-- 购买声音训练额度 -->
				<view class="h2 margin40">购买声音训练额度</view>
				<view class="flex-between align-center margin30">
					<text style="color: #7B838D;line-height: 1;">训练单价</text>
					<text style="color: #000;line-height: 1; font-size: 30rpx; font-weight: 600;">99元</text>
				</view>
				<view class="flex-between align-center margin30">
					<text style="color: #7B838D;line-height: 1;">训练次数</text>
					<u-number-box v-model="number" @change="numberChange" :min="1"></u-number-box>
				</view>
				<view class="flex-between align-center margin30">
					<text style="color: #7B838D; line-height: 1;">总金额</text>
					<text
						style="color: #408EF2; line-height: 1; font-size: 30rpx; font-weight: 600;">{{ number * 99 }}元</text>
				</view>
				<view class="btn margin40" @click="chargeFun()">立即购买</view>
				<view class="margin20" style="color: #7B838D; font-size: 26rpx;">
					每次训练的价格为99元，购买后，训练次数将立即加到您的账户中，请注意，购买的训练次数无法退款。
				</view>

				<!-- 已训练声音 -->
				<view class="h2 margin40">已训练声音</view>
				<view class="w100 flex-column align-center padding-column20 margin60" v-if="list.length===0">
					<image src="../../static/empty.png" style="width: 250rpx; height: 250rpx;"></image>
					<text style="color: #81868e;">当前列表为空</text>
				</view>
				<view class="tabItem flex-between align-center" v-for="(item, index) in list" :key="index">
					<audio :src="item.url" :name="`${item.name}-${item.sex}`" controls style="width: 560rpx"></audio>
					<u-icon name="trash-fill" size="42" style="color: #999;;" @click="deleteId = item.id; show = true" />
				</view>
			</scroll-view>
		</view>
		
		<!-- 删除声音 -->
		<u-modal v-model="show" content="确认删除该声音" :show-cancel-button="true" @confirm="deleteSoundTrain"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: 1,
				list: [],
				availableQuota: 0,
				usedQuota: 0,
				show: false,
				deleteId: "",
			}
		},
		async onLoad() {
			await this.getList()
			await this.getSoundQuota()
		},
		methods: {
			numberChange(e) {
				this.number = e.value
			},
			// 获取用户已完成训练的声音列表
			async getList() {
				const res = await this.$request("/shuziren/soundTrain/done", {
					sex: "全部"
				}, "GET")
				if (res.code === 200) this.list = res.data
			},
			// 获取用户已完成训练的声音列表
			async deleteSoundTrain() {
				const res = await this.$request("/shuziren/soundTrain", {
					id: this.deleteId
				}, "DELETE")
				if (res.code === 200) {
					this.getList();
					this.$u.toast("删除成功")
				} else {
					this.$u.toast(res.msg)
				}
			},
			// 获取用户声音训练额度
			async getSoundQuota() {
				const res = await this.$request("/shuziren/soundQuota", {}, "GET")
				if (res.code === 200) {
					this.availableQuota = res.data.availableQuota
					this.usedQuota = res.data.usedQuota
				}
			},
			
			async chargeFun() {
				const res = await this.$request("/aiet-user-center/user/orders/pay", {
					productName: "购买" + this.number + "次声音训练额度",
					orderAmount: 99 * this.number,
					platform: "数字人-H5",
					productType: 4,
					soundNum: this.number,
					manufacturer: 1
				}, "POST", "application/json")
				if (res.code === 200) {
					console.log(res.data.payUrl)
					// #ifdef H5
					window.location.href = res.data.payUrl
					// #endif
				} else {
					this.$u.toast(res.msg)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .uni-audio-default {
		width: 630rpx;
		min-width: 400rpx;
		height: 88rpx;
		margin-top: 10rpx;
	}
	/deep/ .uni-audio-left {
		width: 88rpx;
		height: 88rpx;
	}
	/deep/ .uni-audio-right {
		margin-left: 0;
		height: 88rpx;
	}
	/deep/ .uni-audio-button {
		width: 40rpx;
		height: 40rpx;
		margin: 24rpx
	}
	.main-content {
		width: 100%;
		height: calc(100vh - var(--window-bottom) - var(--window-top) - 92rpx);
		padding: 30rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #10B981, #3B82F6);

		.content {
			width: 100%;
			height: 100%;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.h2 {
				font-size: 32rpx;
				color: #000;
				font-weight: 600;
			}

			.li {
				width: 300rpx;
				height: 140rpx;
				background: #F3F4F6;
				border-radius: 12rpx;
			}

			.btn {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				border-radius: 12rpx;
				background: linear-gradient(to bottom, #10B981, #3B82F6);
			}

			.tabItem {
				width: 100%;
				height: 88rpx;
				margin-top: 15rpx;
				position: relative;
			}
      .tabActive {
        background: #3B82F6;
      }
		}
	}
</style>
